<template>
<div style="height:100%;">
    <SCList v-on:loadmore="doLoadmore" v-on:reload="doReload" :loading="loading" :datalist="datalist" :morepage="morePage"></SCList>
</div>
</template>


<script>
import SCList from '@/components/sclist';
import {  } from 'vux'
export default {
  components: {
    SCList
  },
  name: 'List',
  data () {
    return {
      loading: false,
      datalist: [],
      page: 1,
      morePage: true
    }
  },
  computed: {
    varstr: function () {
      return this.$route.params.varstr;
    }
  },
  watch: {
    varstr: function(vnew,vold) {
      if(vold!=undefined && vnew!=undefined){
        console.log('watch_varstr')
        this.doReload();
      }
    }
  },
  mounted: function () {
      console.log('mounted')
      this.doReload();
  },
  methods:{
    doReload: function(){
      this.loading=true;      
      this.$store.commit('updateLoadingStatus', {isLoading: true});
      var that=this;
      that.page=1;
      this.$http.get(GV.ROOT + 'lists/ajax_list.html',{
        params: {
          varstr: this.varstr,
          p: that.page
        }
      }).then(function(response){
          // 响应成功回调
          if(response.data.err==2){
            that.$store.commit('updateLoginStatus', {isLogin: false});
          }else{
            console.log('doReload');
            console.log(response.data.list);
            that.datalist=response.data.list;
            that.morePage= response.data.more_page;
            that.loading=false;
            that.$store.commit('updateLoadingStatus', {isLoading: false});
            that.$nextTick(function(){});
          }
          
      }, function(response){
          // 响应错误回调
          //router.push('/login')
      });
    },
    doLoadmore: function(){
      this.loading=true;
      var that=this;
      that.page++;
      this.$http.get(GV.ROOT + 'lists/ajax_list.html',{
        params: {
          varstr: this.varstr,
          p: that.page
        }
      }).then(function(response){
          // 响应成功回调
          if(response.data.err==2){
            that.$store.commit('updateLoginStatus', {isLogin: false});
          }else{
            console.log('doLoadmore');
            console.log(that.datalist);
            that.datalist=that.datalist.concat(response.data.list);
            that.morePage= response.data.more_page;
            that.loading=false;
            that.$nextTick(function(){});
          }
      }, function(response){
          // 响应错误回调
          //router.push('/login')
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
